<!doctype html>
<html lang="zh-CN">
	<head>
		<meta charset="UTF-8">
		<meta name="Generator" content="EditPlus®">
		<meta name="Keywords" content="阴阳师">
		<meta name="Description" content="阴阳师轮播图">
		<meta name="Author" content="哈哈大王">
		<title>十四节动画练习</title>
		<link rel="icon" href="../static/image/akl.ico" type="image/x-icon/">
			<style>
				*{
					margin:0px;
					padding:0px;
					list-style:none;
				}
				html{
					width:100%;
					height:100%;
				}
				body{
					width:100%;
					height:80%;
				}
				.box1{
					width:100%;
					height:90%;
					margin-top:50px;
					background-color:pink;
				}
				ul{overflow:hidden;
					width:100%;
					height:100%;
				}
				li{display:inline-block;position:relative;
					top:50px;left:90px;/* right:0;bottom:0; */
					margin-right:40px;
					width:10%;
					height:70%;
					transition-duration:1s;/* 这里是设置鼠标离开时的平滑过渡效果 */
					/* background-color:snow;font-size:25px; */
				}
				li:nth-child(1){
				background:url(../static/image/1.jpg) no-repeat;
				background-size:100%;
				}
				li:nth-child(2){
				background:url(../static/image/2.gif) no-repeat;
				background-size:100%;
				}
				li:nth-child(3){
				background:url(../static/image/3.png) no-repeat;
				background-size:100%;
				}
				li:nth-child(4){
				background:url(../static/image/4.png) no-repeat;
				background-size:100%;
				}
				li:nth-child(5){
				background:url(../static/image/5.png) no-repeat;
				background-size:100%;
				}
				li:nth-child(6){
				background:url(../static/image/6.png) no-repeat;
				background-size:100%;
				}
				li:nth-child(7){
				background:url(../static/image/7.png) no-repeat;
				background-size:100%;
				}
				/* @keyframes demo{
				0%{top:50px;
					width:10%;
					height:70%;
					
					}
				50%{top:5px;
					width:10.5%;
					height:72%;
					border:5px solid rgba(0,0,0,0.3);}
				100%{top:50px;
					width:10%;
					height:70%;}
				} */
				 li:hover{
				 	top:5px;
				 	width:10.5%;
				 	height:72%;
				 	border:5px solid rgba(0,0,0,0.3);
				 	transition-duration:1s;
				 }
				/* li{
				animation:demo;
				animation-duration:2s;
				} */
			</style>
	</head>
 <body>
	<div class="box1">
		<ul>
			<li class="pict1"></li>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
		</ul>
	</div>
 </body>
</html>
